import React from "react";

/* PureComponent和 Component用法，差不多一样，唯一不同的是，纯组件PureComponent会浅比较，
 props和state是否相同，来决定是否重新渲染组件。所以一般用于性能调优，减少render次数。*/
export default class Index extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      data: {
        name: "alien",
        age: 28,
      },
    };
  }
  handelClick = () => {
    const { data } = this.state;
    data.age++;
    //   this.setState({ data })
    // 点击按钮，没有任何反应，因为PureComponent会比较两次data对象，都指向同一个data,没有发生改变，所以不更新视图。
    this.setState({ data: { ...data } });
  };
  render() {
    const { data } = this.state;
    return (
      <div className="box">
        <div className="show">
          <div> 你的姓名是: {data.name} </div>
          <div> 年龄： {data.age}</div>
          <button onClick={this.handelClick}>age++</button>
        </div>
      </div>
    );
  }
}
